<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--suppress ALL-->
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link th:href="@{/resources/css/common.css}" rel="stylesheet" tyle="text/css" />
<link th:href="@{/resources/css/style.css}" rel="stylesheet" type="text/css" />
    <script th:src="@{/resources/js/jquery-3.4.1.min.js}"></script>
    <script th:src="@{/resources/js/bootstrap.min.js}"></script>
<title>用户登录</title>
</head>

<body>
<!--顶部样式-->
<div class="common_top">
 <div class="Narrow">
  <div class=" left logo"><img th:src="@{/resources/images/logo.png}" /></div>
  <!--可修改图层-->
  <div class=" left festival"><img th:src="@{/resources/images/logo_yd.png}" /></div>
  <!--电话图层-->
  <div class="phone">全国服务热线：<em>400-123456</em></div>
 </div>
</div>
<div class="login Narrow">
   <div class="login_advertising"><img th:src="@{/resources/images/login_img_03.png}" /></div>
  <div class="login_frame">
      <form th:action="@{/user/userLogin}" method="post">
   <div class="login-form right">
     <div class="login-name">
         <h1 class="name">用户登录</h1>
         <span class="login_link">
             <a th:href="@{/toRegister}"><b></b>用户注册</a>
         </span>
     </div>

	    <div class="form clearfix">
	     <div class="item item-fore1">
             <label for="loginname" class="login-label name-label"></label>
             <input id="loginphone" name="phone" type="number"  class="text" placeholder="请输入手机号码" required/>
		 </div>
		 <div class="item item-fore2">
             <label for="nloginpwd" class="login-label pwd-label" ></label>
             <input name="password" type="password"  class="text" placeholder="用户密码" required/>
	     </div> 
	    <!-- <div class="Forgetpass"><a th:href="#">忘记密码？</a></div>-->
	    </div>	
	    <div class="login-btn">
            <button id="submit" type="submit" class="btn_login">登&nbsp;&nbsp;&nbsp;&nbsp;录</button>
	  </div>
       <!--提示信息-->
       <div class="infonav_hidden" id="msgalert" style="text-align: center; font-size: 16px; color: red; margin:10px auto;"> </div>
    </div>
      </form>
  </div>
</div>
<!--底部样式-->
 <div class="bottom_footer">
   <p><a href="#">关于我们</a> | <a href="#">联系我们</a> | <a href="#">商家入驻</a> | <a href="#">法律申明</a> | <a href="#">友情链接</a>  </p>
   </div>
<script >
    /*
   *判断手机号码格式是否正确
    */
    $("#loginphone").blur(function(){
        var phonenum = $("#loginphone").val();
        if(phonenum == null){
            $("#msgalert").text("手机号不能为空");
        }else if(!(/^1[3456789]\d{9}$/.test(phonenum))){
            $("#msgalert").text("手机号格式有误");
            $("#submit").attr('disabled',true);
            return false;
        }else{
            $.ajax({
                url:"user/judgePhone?phoneNum="+$('#loginphone').val(),
                success (data) {
                    if (data.toString() == phonenum) {
                        $("#msgalert").text("");
                        $("#submit").attr('disabled',false);
                    }else{
                        $("#msgalert").text("用户名不存在");
                        $("#submit").attr('disabled',true);
                    }
                }
            });
            return true;
        }
    });

</script>
</body>
</html>
